<template>
  <div class="bg_white" style="height: calc(100vh - 198px);">
    <div>
      <div>
        <a-date-picker v-model="startValue" :disabled-date="disabledStartDate" show-time format="YYYY-MM-DD HH:mm:ss"
          placeholder="开始时间" @openChange="handleStartOpenChange" />
        <a-date-picker v-model="endValue" :disabled-date="disabledEndDate" show-time format="YYYY-MM-DD HH:mm:ss"
          placeholder="结束时间" :open="endOpen" @openChange="handleEndOpenChange" />
        <a-button type="primary" :loading="loading1" @click="searched" style="margin: 0   16px ">查询</a-button>
        <a-button @click="reseted">重置</a-button>
        <a-button type="primary" style="margin: 0   16px " :disabled="!hasSelected" :loading="loading" @click="stoped">终止</a-button>
      </div>
      <span style="margin-left: 8px">
        <template v-if="hasSelected">
          {{ `Selected ${selectedRowKeys.length} items` }}
        </template>
      </span>
    </div>
    <a-table :pagination="false" bordered
      :rowKey="record => record.id" :columns="columns" :data-source="data">
    </a-table>
    <a-pagination style="display: flex;justify-content: flex-end;margin: 10px 0;" :pageSizeOptions="pageSizeOptions"
      show-size-changer :total="totalPage" @showSizeChange="onShowSizeChange" @change="pagechange" />
  </div>
</template>

<script>
const columns = [
  {
    title: '会话',
    dataIndex: 'id',
  },
  {
    title: '登录名',
    dataIndex: 'username',
  },
  {
    title: '用户名称',
    dataIndex: 'displayName',
  },
  {
    title: '状态',
    dataIndex: 'sessionStatus',
  },
  {
    title: '登录方式',
    dataIndex: 'loginType',
  },
  {
    title: '访问地址',
    dataIndex: 'sourceIp',
  },
  {
    title: '浏览器',
    dataIndex: 'browser',
  },
  {
    title: '平台',
    dataIndex: 'platform',
  },
  {
    title: '登录时间',
    dataIndex: 'loginTime',
  },
]

import httplogin from '@/api/login'

export default {
  data() {
    return {
      pageSizeOptions: ['10', '30', '50', '100'],
      startValue: null,
      endValue: null,
      startValue1: null,
      endValue1: null,
      endOpen: false,
      data: [],
      columns,
      selectedRowKeys: [], // 选中此处以配置默认列
      loading: false,
      loading1: false,
      pageSize: 10,
      pageNumber: 1,
      totalPage: null,
    }
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  mounted() {
    this.init()
  },
  watch: {
    startValue(val) {
      console.log('startValue', val);
      if (val == undefined) return
      this.startValue1 = val._d.getTime()
    },
    endValue(val) {
      console.log('endValue', val);
      if (val == undefined) return
      this.endValue1 = val._d.getTime()
    },
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize;
      this.pageNumber = current;
      this.init()
    },
    pagechange(val) {
      this.pageNumber = val;
      this.init()
    },
    timestampToTime(timestamp) {
      // 时间戳为10位需*1000，时间戳为13位不需乘1000
      var date = new Date(timestamp);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;

    },
    init() {
      const data = {
        startDate: this.startValue1 == null ? this.timestampToTime(new Date().setMonth(new Date().getMonth() - 1)) : this.timestampToTime(this.startValue1),
        endDate: this.endValue1 == null ? this.timestampToTime(new Date().getTime()) : this.timestampToTime(this.endValue1),
        pageSize: this.pageSize,
        pageNumber: this.pageNumber,
      }
      httplogin.session_fetch(data).then((result) => {
        if (result.status === 200) {
          this.data = result.data.data.rows
          this.totalPage = result.data.data.records

        }
      }).catch((err) => {
        console.error(err);
      });
    },
    //重置
    reseted() {
      this.endValue = undefined
      this.startValue = undefined
      this.endValue1 = null
      this.startValue1 = null
    },
    //查询
    searched() {
      this.init();
    },
    //时间选择器
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },

    stoped() {
      this.loading = true
      setTimeout(() => {
        this.loading = false
        this.selectedRowKeys = []
      }, 1000)
      var str = "";
      for (let i = 0; i < this.selectedRowKeys.length; i++) {
        str += this.selectedRowKeys[i] + ","
      }
      httplogin.terminate({ ids: str }).then((res) => {
        if (res.data.code === 0) {
          // openNotificationWithIcon(type) {
          this.$notification['success']({
            message: '操作成功',
            description:
              '终止会话成功',
          });

        }
      })
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
}
</script>

<style>
.ant-table-wrapper {
  background: #fff;
}
</style>
